@import 'base';
@vw: 3.75vw;
@color: #fb7299;
// 头部固定
header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%; // width: 100vw;
  height: (84 / @vw); // top
  background-color: #fff;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: (44 / @vw);
    padding-left: (18 / @vw);
    padding-right: (12 / @vw);
    .left {
      .iconfont {
        font-size: (28 / @vw);
        color: @color;
      }
    }
    .right {
      display: flex;
      .iconfont {
        font-size: (22 / @vw);
        color: #ccc;
      }
      .login {
        width: (24 / @vw);
        height: (24 / @vw);
        margin-left: (24 / @vw);
      }
      .download {
        width: (72 / @vw);
        height: (24 / @vw);
        margin-left: (24 / @vw);
      }
    }
  } // bottom
  .bottom {
    display: flex;
    justify-content: space-between;
    height: (40 / @vw);
    border-bottom: 1px solid #eee;
    .more {
      a {
        display: block;
        width: (40 / @vw);
        height: (40 / @vw);
        text-align: center;
        line-height: (40 / @vw); // font-size: (22 / @vw);
        color: #ccc;
        .iconfont {
          font-size: (22 / @vw);
        }
      }
    }
    .tab {
      ul {
        display: flex;
        li {
          padding: 0 (16 / @vw);
          a {
            display: block;
            height: (39 / @vw);
            line-height: (38 / @vw);
            font-size: (14 / @vw);
            &.active {
              border-bottom: 2px solid @color;
              color: @color;
            }
          }
        }
      }
    }
  }
}

// 视频
.video_content {
  // 这里给左右设置5的宽是为了下面的盒子中间加起来是10，两边就是5 + 这里的5，刚好是10
  padding: (84 / @vw) (5 / @vw) 0;
  .video_list {
    display: flex;
    flex-wrap: wrap;
    a {
      width: 50%;
      padding: (8 / @vw) (5 / @vw);
      font-size: (12 / @vw);
      .txt {
        margin-top: (5 / @vw);
      }
      .pic {
        position: relative;
        .count {
          position: absolute;
          left: 0;
          bottom: 0;
          display: flex;
          justify-content: space-between;
          width: 100%;
          padding: (8 / @vw);
          background-image: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
          color: #fff;
          i {
            vertical-align: middle;
          }
        }
      }
    }
  }
}